<template>
	<view>
		<view style="width: 100%; text-align: center; margin: 10rpx 0;">
			<image @click="change1" style="width: 150rpx;height: 150rpx; border-radius: 50%; " :src="form.portrait?form.portrait:require('@/static/toux.png')"
				mode=""></image>
		</view>
		<view v-if="form" style="width: 90%; margin: 0 auto;">
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item label="姓名" required name="username">
					<uni-easyinput v-model="form.username" :placeholder="form.username?form.username:'请输入'" />
				</uni-forms-item>
				<uni-forms-item label="匿名" required name="nickName">
					<uni-easyinput v-model="form.nickName" :placeholder="form.nickName?form.nickName:'请输入'" />
				</uni-forms-item>
				<uni-forms-item label="年龄" required name="age">
					<uni-easyinput v-model="form.age" :placeholder="form.age?form.age:100" />
				</uni-forms-item>
				<uni-forms-item label="地址" required name="address">
					<uni-easyinput v-model="form.address" :placeholder="form.address?form.address:'请输入'" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="sex">
					<uni-data-checkbox v-model="form.sex" :localdata="sexs"></uni-data-checkbox>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" style="margin: 10rpx;" @click="update()">提交</button>
			<navigator url="/pages/mine/mine" open-type="switchTab" hover-class="other-navigator-hover">

				<button type="primary" style="margin: 10rpx;">取消</button>
			</navigator>
			<view class="" style="color: royalblue;" @click="change(userId)">
				前往修改密码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: null,
				form: {},
				sexs: [{
					"value": "男",
					"text": "男"
				}, {
					"value": "女",
					"text": "女"
				}],
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '地址不能为空'
						}]
					},
					nickName: {
						rules: [{
							required: true,
							errorMessage: '匿名不能为空'
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					age: {
						rules: [{
								required: true,
								errorMessage: '年龄不能为空'
							},
							// {
							// 	format: '/^(0?|-?[1-9]\d*)$/',
							// 	errorMessage: '年龄只能输入数字'
							// },
							{
								pattern: '^((1[0-5])|[1-9])?\\d$',
								errorMessage: '年龄只能输入正三位数'
							}
						]
					}
				},
			}
		},
		onLoad(option) {
			this.userId = uni.getStorageSync('user').id;
			this.loading();
		},
		methods: {
			loading() {
				this.request({
					url: `/user/${this.userId}`
				}).then(res => {
					this.form = res.data;
				});
			},
			update() {
				this.$refs.form.validate().then(res => {
					console.log("nmb");
					this.request({
						url: '/user',
						method: 'PUT',
						data: this.form
					}).then(res => {
						// console.log(res)
						if (res.code === '0') {
							// 跳转页面
							uni.switchTab({
								url: '/pages/mine/mine'
							})
							uni.showToast({
								title: '更新成功'
							})
							// 存储用户的数据到 storage
							// uni.setStorageSync('user', res.data)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			change1() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:9090/files/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							// formData: {
							// 	'user': 'test'
							// },
							success: (uploadFileRes) => {
								this.form.portrait = JSON.parse(uploadFileRes.data).data;
							}
						});
					}
				});
			},
			change(userId) {
				uni.navigateTo({
					url: `/pages/mine/setpassword?userId=${userId}`
				});
			},
		}
	}
</script>

<style>

</style>
